<template>
  <div class="wrapper" ref="scroll">
    <div class="content">
      <!--   无论是否设置click:true,button都可以点击   -->
      <button @click="click">按钮</button>
      <!--   必须设置click:true,div(span等等)才可以点击   -->
      <div @click="click">hhh</div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
      </ul>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
export default {
  name: 'Category',
  data () {
    return {
      scroll: null
    }
  },
  created () {
    // const bs = new BetterScroll('.wrapper', {
    // })
    // console.log(bs)
  },
  mounted () {
    this.scroll = new BetterScroll(this.$refs.scroll, {
      click: false,
      // 派发 scroll 的场景分为两种：
      // 1. 手指作用在滚动区域（content DOM）上;
      // 2. 调用 scrollTo 方法或者触发 momentum 滚动动画（其实底层还是调用 scrollTo 方法）

      // 对于 v2.1.0 版本，对 probeType 做了一次统一

      // 1. probeType 为 0，在任何时候都不派发 scroll 事件，
      // 2. probeType 为 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
      // 3. probeType 为 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
      // 4. probeType 为 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
      probeType: 3,

      pullUpLoad: true
    })
    this.scroll.on('scroll', (positon) => {
      // console.log(positon)
    })
    this.scroll.on('pullingUp', () => {
      console.log('上拉加载更多')
      // setTimeout(() => {
      //   this.scroll.finishPullUp()
      // }, 2000)
      this.scroll.finishPullUp()
    })
  },
  methods: {
    click () {
      console.log('hhhhh')
    }
  }
}
</script>

<style scoped lang="scss">
  .wrapper{
    height: 159px;
    background-color: skyblue;
    /*overflow: scroll;*/
  }
</style>
